<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>本周会议预约</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/mui.picker.css"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/mui.dtpicker.css"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/mui.picker.min.css"/>

	<script src="__PUBLIC__/Home/js/mui.min.js"></script>
	<script src="__PUBLIC__/Home/js/jquery.min.js"></script>
	<script src="__PUBLIC__/Home/js/mui.picker.min.js"></script>
	<style>
		body{
			font-family: "微软雅黑";
		}
        #starttime{
            font-size:0.8em;
        }
	</style>
</head>
<body>
	<div class="mui-content">
	    <div class="mui-input-row mui-search" style="margin-top:20px">
			<input type="text" id="starttime" class="mui-input-clear " placeholder="请选择时间查看会议室占用情况,默认当天">
		</div>
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-badge-purple" id="time" style="text-align: center;"></li>
		</ul>
	 	<ul class="mui-table-view mui-grid-view" >
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">会议室</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">上午</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">下午</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">晚上</div>
	        </li>
        </ul>
        <ul class="mui-table-view mui-grid-view meetinglist" >
            <?php foreach($data as $k=>$v){ ?>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3" >
                <div class="mui-media-body"><?php echo $v['name']; ?></div>
	        </li>
            <?php foreach($v['syqk'] as $k1=>$v1){ ?>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <?php $sj = explode(' ',$date);?>
                <a href="{:U('meeting_syqk',array('date'=>$sj[0],'meeting_room'=>$v['id'],'sjd'=>$k1,'syqk'=>$v1))}">
                    <div class="mui-media-body">
                        <?php if($v1 == '已满'){ $class='danger'; }else{ $class='primary';} ?>
                        <span class="mui-badge mui-badge-<?php echo $class; ?>">
                            <?php echo $v1; ?>
                        </span>
                    </div>
                </a>
	        </li>
	        <?php } } ?>
	    </ul>

		<ul class="mui-table-view" id="view">
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right" style="text-align: center;">查看领导空闲状态</a>
			</li>
		</ul>
        <ul class="mui-table-view mui-grid-view" id="lindao" style="display: none;">
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">领导</div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">上午</div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">下午</div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">晚上</div>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">领导一</div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-primary">空</span></div>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">领导二</div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-primary">空</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">领导三</div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-primary">空</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body">领导四</div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
            </li>
        </ul>
	</div>
</body>
<script type="text/javascript">
    var dateinfo = '{$date}';  //日期+星期

    mui.ready(function(){
        mui.init();
        var time1 = new Date();
        var startz = time1.getDay();
        var end = 7 - startz;
        var time = time1.getTime();
        end = new Date(time + end*24*3600*1000);
        var zhou = new Date();

        //设置显示当天的日期或者选择的日期
        document.getElementById('time').innerText= dateinfo;

        //选择日期加载日期视图
        var dtpicker = new mui.DtPicker({
            type: "date",//设置日历初始视图模式
            beginDate: new Date(zhou.getFullYear(),zhou.getMonth(),zhou.getDate()),//设置开始日期
            endDate: new Date(end.getFullYear(),end.getMonth(),end.getDate()),//设置结束日期
            labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语
            customData: {}//时间/日期别名
        });

        dtpicker.hide(function(e) {
            console.log(e);
        });

        //选择好日期之后加上星期跳转到当前控制器
        document.getElementById('starttime').addEventListener('tap',function(){
            dtpicker.show(function(e) {
                var use_time= e.text;
                var zhou1 = new Date(use_time);
                var arr1 = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
                var zhouindex1 =  arr1[zhou1.getDay()];
                var date = use_time+'--'+zhouindex1;

                window.location.href = '__CONTROLLER__/this_week/date/'+date;
            })
        });

        $('#view').click(function(){
            $('#lindao').toggle();
        })
    });

</script>
</html>